<template>
  <div class="zhiboxiaoshou_shangpinfabu">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right" style="padding:15px 0 15px 15px;">
            <el-breadcrumb separator="/" style="margin-top: 20px;margin-left: 20px;">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou'}">信息流推广</el-breadcrumb-item>
            <el-breadcrumb-item>添加多商品</el-breadcrumb-item>
          </el-breadcrumb>
        <div class="zhiboxitong_right" style=" padding: 0 0 0 10px;margin-top: 20px; padding-bottom: 30px;">
          <div style="color:#333333; font-size: 20px; margin: 20px 0 0 30px;font-weight:bold">商品信息配置</div>
          <div class="flex one_module">
            <div class="fleft">
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z"><span class="red">*</span>选择商品:</div>
                <div class="r flex">
                  <div style="background: white; padding: 20px; border-radius: 5px;">
                    <div class="flex" v-for="(item,index) in all.pages" :key="index" style="margin-bottom: 10px;">
                      <div><el-input v-model="item.page_name2" style="width: 220px; margin-right: 20px;" placeholder="请选择商品" disabled v-if="item.page_name2 != ''"></el-input> <el-button @click="log_shopxuanze(index)" style="border-radius:12px">选择商品</el-button></div>
                      <div style="margin-left: 20px;">商品名称：<el-input v-model="item.page_name" style="width: 220px;" placeholder="请输入商品名称"></el-input></div>
                      <div style="margin-left: 20px;">售价：<el-input v-model="item.unit_price" style="width: 220px;" placeholder="请输入价格" ></el-input></div>
                      <div style="margin-left: 20px;"><el-button @click="shanchuduo(index)" style="border-radius:12px;">删除</el-button></div>
                    </div>
                    <div><el-button @click="all_pages_add" style="border:1px solid #F72C6A;color:#F72C6A;border-radius:12px">添加套餐</el-button></div>
                  </div>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z"><span class="red">*</span>页面名称:</div>
                <div class="r"><el-input v-model="all.sale_name" placeholder="请输入页面名称"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z"><span class="red">*</span>订单来源:</div>
                <div class="r"><el-input v-model="all.page_source" placeholder="请输入敢探号的订单来源"></el-input></div>
              </div>

              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">页面背景色:</div>
                <div class="r">
                  <el-color-picker v-model="all.pic"></el-color-picker>
                  <!-- <chuantu ref="chuantu" v-if="relo" @getimg="getimg" :imgs="all.pic"></chuantu> -->
                </div>
              </div>

              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">商品主图:</div>
                <div class="r">
                  <chuantu ref="chuantu" v-if="relo" @getimg="getimg2" :imgs="all.details" style="background:white;" heights="100px" widths="100px"></chuantu>
                </div>
              </div>

              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">商品底图:</div>
                <div class="r">
                  <chuantu ref="chuantu" v-if="relo" @getimg="getimg3" :imgs="all.footer" style="background:white;"  heights="100px" widths="100px"></chuantu>
                </div>
              </div>
            </div>

          </div>
          <div
            style="color: rgb(51, 51, 51); font-size: 16px; margin: 20px 20px;font-weight:bold; display: flex;align-items: center;"
          >
            赠品（子商品）配置
            <span style="margin-left:28px ;color: #999999;font-size: 14px;">本功能会在用户下单处增加赠品选项的勾选框，用户勾选表示同意获取赠品，敢探号在后台会同时创建一个赠品商品的订单，赠品订单右上角会有"赠"字，点击展示其原订单ID</span>
          </div>
          <div
            style="background:#F8F9FD; padding: 0 30px;margin-top: 20px; padding-bottom: 30px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;"
          >
            <div class="fleft" style="position: relative; width: 100%;">

              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">
                  添加赠品子商品:
                </div>
                <div class="r flex">
                  <el-input
                    v-model="all2.page_name_zi"
                    style="width: 220px; margin-right: 20px;"
                    placeholder="请选择商品"
                    disabled
                    v-if="all2.page_name_zi != ''"
                  ></el-input>
                  <el-button
                    @click="log_shopxuanze('',2)"
                    style="background:#F72C6A;border-radius:12px;border:none;color:white"
                  >选择商品</el-button>
                </div>
              </div>


              <div class="flexc" style="margin-bottom: 20px;align-items: center;">
                <div class="z">
                  赠品宣传图:
                </div>
                <div class="r">
                  <chuantu
                    ref="chuantu"
                    v-if="relo"
                    @getimg="getimg6"
                    :imgs="all2.pic_zi"
                    widths="100px"
                    heights="100px"
                    style="background:white"
                  ></chuantu>
                </div>
                <div style="margin-left: 13px;">用于引导用户勾选的图片</div>
              </div>

              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z" style="margin-top:20px">赠品默认勾选:</div>
                <div class="r">
                  <el-switch
                  @change="change1"
                    style="display: block;margin-top:20px"
                    v-model="all2.zimoren"
                    active-color="rgb(71, 140, 253)"
                    inactive-color="rgb(69, 69, 69)"
                    active-value="1"
                    inactive-value="2"
                  ></el-switch>
                </div>
              </div>


             </div>
          </div>
            <div style="color:#333333; font-size: 20px; margin: 20px 0 0 20px;font-weight:bold">商品下单信息配置</div>
          <div class="flex two_module">

            <div class="xialeft">
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z" style="margin-top:20px;width: 120px;">下单二次确认:</div>
                <div class="r" style="display: flex;align-items: center;">
                  <el-switch
                    style="display: block;margin-top:20px"
                    v-model="all2.sureagain"
                    active-color="rgb(71, 140, 253)"
                    inactive-color="rgb(69, 69, 69)"
                    active-value="1"
                    inactive-value="2"
                  ></el-switch>
                  <span style="margin-top: 22px;margin-left: 10px;">用户在点击提交订单时会弹出您设置的确认内容让用户再次确认，用户点击确认后下单成功</span>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;align-items: center;">
                <div class="z" style="width: 320px;">
                  上传需确认的内容:
                </div>
                <div class="r">
                  <chuantu
                    ref="chuantu"
                    v-if="relo"
                    @getimg="getimg8"
                    :imgs="all2.pic_sure"
                    widths="100px"
                    heights="100px"
                    style="background:white"
                  ></chuantu>
                </div>
                <!-- <div style="margin-left: 13px;">限制宽度为660PX</div> -->
              </div>
              <div style="display:flex">
              <div style="margin: 20px 20px;font-size:14px;margin-left:45px">入网协议:</div>
              <div class="flexc">
                <!-- <div style="margin-right: 20px;"><el-radio v-model="all2.ruwangxieyi" label="0">无</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all2.ruwangxieyi" label="1">有</el-radio></div> -->

                <div style="margin-right: 20px;"><el-radio v-model="all.network_access_protocol" :label="0">无</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all.network_access_protocol" :label="1">有</el-radio></div>

                <el-select v-model="all.protocol_id" clearable filterable multiple collapse-tags style="margin-left: 20px;" placeholder="选择协议"  v-if="all.network_access_protocol == 1">
                  <el-option v-for="item in xieyilist" :key="item.id" :label="item.title" :value="item.id"></el-option>
                </el-select>

                <div class="b_nav" style="margin-left: 10px;">
                  <el-button style="border:none;color:#005AFF;background:#F8F9FD" @click="goAgreement">管理协议</el-button>
                </div>

                <el-checkbox style="margin-left: 20px;" v-model="all.protocol_check">默认勾选</el-checkbox>

                <el-tooltip class="item" effect="dark" content="使用默认勾选后用户下单时无需勾选,此操作不合规,请谨慎使用" placement="top-start">
                	<i class="el-icon-question" style="color: #409EFF; font-size: 25px; margin-left: 5px; cursor: pointer;" ></i>
                </el-tooltip>
              </div>
               </div>
               <div style="display:flex">
              <div style="margin: 20px 20px 20px 5px;font-size:14px">身份证信息填写:</div>
              <div class="flexc">
                <div style="margin-right: 20px;"><el-radio @input="isneedcard" v-model="all2.needidcard" label="1">是</el-radio></div>
                <div style="margin-right: 20px;"><el-radio @input="isneedcard" v-model="all2.needidcard" label="2">否</el-radio></div>
              </div>
              </div>
              <div style="display:flex">
              <div style="margin: 20px 20px;font-size:14px">用户下单限制:</div>
                    <div style="margin-top:20px">
                    <div><el-checkbox :disabled="all2.needidcard=='2'" v-model="all2.guozhengtong" @change="guozhengtongxuanze">身份证信息国政通校验（付费2角/条）</el-checkbox>
                    <span style="color: #999; font-size: 12px;margin-left:10px">用户填写的身份证信息需经过国政通校验后才可通过，敢探号余额不足后将不会再验证身份证信息，用户可正常下单</span>
                    </div>
                    <div style="margin-top:20px">
                    <!-- <div style="margin-bottom: 10px;"><el-checkbox v-model="all2.zuidaxiadan">同一证件信息最大下单数量限制（根据产品设置参数限制）</el-checkbox></div> -->
                    <div><el-checkbox v-model="all2.duanxin">联系电话验证码校验（付费5分/条）</el-checkbox>
                    <span style="color: #999; font-size: 12px;margin-left:25px">验证码有小概率会出现部分用户收不到的情况</span>

                    </div>
                    </div>
                    </div>

                    </div>
                    <div class="flexc" style="margin-bottom: 20px;margin-left:20px;margin-top:20px" v-if="all2.needidcard == 1">
                      <div style="margin-right: 15px;">用户年龄限制：</div><span>允许下单的年龄范围</span>
                      <div class="flexc" style="margin-left: 20px;">
                        <el-input v-model="all2.min_page" style="width: 120px; margin-right: 10px;" placeholder="选择最小年龄"></el-input>
                        ——
                        <el-input v-model="all2.max_page" style="width: 120px; margin-left:100px;" placeholder="选择最大年龄"></el-input>
                      </div>
                      <el-tooltip class="item" effect="dark" content="根据用户输入的身份证检测年龄，不符合该年龄范围的用户不能提交订单" placement="top-start">
                        <i class="el-icon-question" style="color: #409EFF; font-size: 25px; margin-left: 5px; cursor: pointer;" ></i>
                      </el-tooltip>
                    </div>
                    <!-- <div style="font-size: 14px;">
                      同一证件号下单数量限制:
                      <el-select v-model="all.limit" style="margin-left: 20px;" placeholder="选择已有的直播页">
                        <el-option label="不限制" :value="0"></el-option>
                        <el-option v-for="item in 9" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                    </div> -->

                    <div style="font-size: 14px;margin-left:35px">
                      下单数限制:
                      <el-select v-model="all.limit" style="margin-left: 20px;" placeholder="选择已有的直播页">
                        <el-option label="不限制" :value="0"></el-option>
                        <el-option v-for="item in 9" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                      <el-select v-model="limit_type1" style="margin-left: 20px;" placeholder="选择已有的直播页" v-if="all2.needidcard=='1'">
                        <el-option label="按照身份证识别" :value="0"></el-option>
                        <el-option label="按照手机号识别" :value="1"></el-option>
                        <el-option label="按照IP地址识别" :value="2"></el-option>
                      </el-select>
                      <el-select v-model="limit_type2" style="margin-left: 20px;" placeholder="选择已有的直播页" v-if="all2.needidcard=='2'">
                        <el-option label="按照手机号识别" :value="1"></el-option>
                        <el-option label="按照IP地址识别" :value="2"></el-option>
                      </el-select>
                      <span v-if="limit_type2 == 2 || limit_type1 == 2" style="color: #999; margin-left: 10px;">如果投放页面的环境无法获取用户IP，此限制将会失效。</span>
                    </div>

              <div style="display:flex">
              <div style="margin: 20px 20px;font-size:14px">收货信息模块:</div>
              <div style="margin-bottom: 20px;display:flex;margin-top: 20px;">
                <!-- <div style="margin-bottom: 10px;"><el-checkbox v-model="all2.shenfenzhengtianxie" :disabled="all2.needidcard=='2'"  @change="shenfenzhengtianxiexuanze">身份证填写</el-checkbox></div> -->

                <div style="margin-bottom: 10px;"><el-checkbox :disabled="all2.needidcard=='2'" v-model="all2.shouhuorenxingming">收货人使用身份证姓名</el-checkbox></div>
                <div><el-checkbox v-model="all2.shenfenzheng" style="margin-left: 20px;">身份证照片上传</el-checkbox><span style="margin-left: 20px;color: #999; font-size: 12px;" >当前商品需要照片</span></div>
              </div>
               </div>
               <div style="display:flex">
              <div style="margin: 20px 20px 20px 35px;font-size:14px">收货人模块:</div>
              <div style="margin-bottom: 20px;display:flex">

                <div style="margin-bottom: 10px;font-size: 14px;margin-top: 20px;margin-left: 10px; " class="flex"><div style="width: 60px;">{{all2.shouhuot2}}</div>
                <div class="flexc" style="color: #335DFF;cursor: pointer;"  @click="bianjit('shouhuot2')"><i class="el-icon-edit" style="font-size: 12px; margin-left: 20px; color: #409eff;" ></i>编辑名称</div></div>
                <div style="margin-bottom: 10px;font-size: 14px;margin-top: 20px;margin-left: 80px; " class="flex"><div style="width: 60px;">{{all2.shouhuot3}}</div>
                <div class="flexc" style="color: #335DFF;cursor: pointer;"  @click="bianjit('shouhuot3')"><i class="el-icon-edit" style="font-size: 12px; margin-left: 20px; color: #409eff;" ></i>编辑名称</div></div>
                  <div style="margin-bottom: 10px;font-size: 14px;margin-top: 20px;margin-left: 80px; " class="flex" v-if="!this.all2.shouhuorenxingming">
                  <div style="width: 70px">{{all2.shouhuot1}}</div>
                  <div class="flexc" style="color: #335DFF; cursor: pointer;" @click="bianjit('shouhuot1')"><i class="el-icon-edit" style="font-size: 12px; color: #409eff;"></i>编辑名称</div>
                  </div>
              </div>
              </div>
              <div style="display:flex">
              <div class="z" style="margin: 20px 0;font-size:14px;margin-left:10px">不发货地区:</div>
              <div class="flex" style="margin-bottom: 20px;">
                <el-upload style="height: 34px;" :show-file-list="false"  action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup">
                  <el-button size="small" style="background:#335DFF;border-radius:12px;border:none;color:white;margin-top:15px">上传不发货地址</el-button>
                </el-upload>
                <el-button type="text" @click="down" style="margin-left: 20px;color:#335DFF;margin-top:15px">模板下载</el-button>
              </div>
               </div>
              <div class="flexc" style="margin-left:130px">
                <div style="margin-right: 20px;"><el-radio v-model="all2.bufahuodiqu" label="2">使用产品的不发货区域</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all2.bufahuodiqu" label="1">设置只发货区域</el-radio></div>
                <div><el-radio v-model="all2.bufahuodiqu" label="3">设置不发货区域</el-radio></div>
              </div>
              <div style="margin-bottom: 20px;margin-left:130px" v-if="all2.bufahuodiqu == 1">
                <div style="color: #999; font-size: 12px; padding: 10px 23px;">设置后用户只能选择选中的省市为收货地址</div>
                <div style="padding-left: 23px;">
                    <el-cascader :options="options" v-model="all2.delivery_city" collapse-tags :props="props" clearable>
                    </el-cascader>
                </div>
              </div>
              <div style="margin-bottom: 20px;margin-left:130px" v-if="all2.bufahuodiqu == 3">
                <div style="color: #999; font-size: 12px; padding: 10px 23px;">设置后用户不能选择选中的省市为收货地址</div>
                <div style="padding-left: 23px;">
                    <el-cascader ref="test" :options="options" v-model="all2.no_city" collapse-tags :props="props" clearable @change="test" >
                    </el-cascader>
                </div>
              </div>
             <!-- <div class="xiaright">

              <div :style="{'background': all.pic,'padding': '5px','height': '600px','overflow': 'auto'}">
                <div><img :src="all.details"></div>
                 <div style="margin-bottom: 10px; background: #fff; border-radius: 3px;">
                   <div style="padding: 5px; font-size: 14px; font-weight: bold;">选择套餐</div>
                   <div style="background: #fff; border-radius:5px; padding:0.4rem; margin-top:0.2rem; " >
                   	<div class="taocan"  v-for="(item,index) in all.pages" :key="item.id" style="font-size: 12px;">{{item.page_name}}</div>
                   </div>
                 </div>
                  <div style="margin-bottom: 10px; background: #fff; border-radius: 3px;" v-if="all2.needidcard=='1'">
                    <div style="padding: 5px; font-size: 14px; font-weight: bold;">个人信息</div>
                    <div class="flex" style="border-bottom: 1px #eaeaea solid; padding: 10px; font-size: 12px;">
                      <div style="width: 80px; text-align: left;">姓名：</div>
                      <div style="color: #999;">请输入姓名</div>
                    </div>
                    <div  class="flex" style="border-bottom: 1px #eaeaea solid; padding: 10px; font-size: 12px;" >
                      <div style="width: 80px; text-align: left;">身份证号：</div>
                      <div style="color: #999;">请输入身份证号</div>
                    </div>
                  </div>

              <div style="margin-bottom: 0px; background: #fff; border-radius: 3px;">
                <div style="padding: 5px; font-size: 14px; font-weight: bold;">收货信息</div>
                  <div class="flex" style="border-bottom: 1px #eaeaea solid; padding: 10px; font-size: 12px;" v-if="!this.all2.shouhuorenxingming">
                    <div style="width: 80px; text-align: left;">{{all2.shouhuot1}}：</div>
                    <div style="color: #999;">请输入收货人</div>
                  </div>


                  <div v-if="all2.lianxidianhua" class="flex" style="border-bottom: 1px #eaeaea solid; padding: 10px; font-size: 12px; position: relative;">
                    <div style="width: 80px; text-align: left;">{{all2.shouhuot2}}：</div>
                    <div v-if="all2.duanxin" style="position: absolute; right: 10px; top: 8px; background: #409eff; color: #fff; padding: 3px 5px;" >获取验证码</div>
                  </div>
                  <div v-if="all2.duanxin" class="flex" style="border-bottom: 1px #eaeaea solid; padding: 10px; font-size: 12px;">
                    <div style="width: 80px; text-align: left;">验证码：</div>
                    <div style="color: #999;">请输入验证码</div>
                  </div>
                  <div class="flex" style="border-bottom: 1px #eaeaea solid; padding: 10px; font-size: 12px;">
                    <div style="width: 80px; text-align: left;">{{all2.shouhuot3}}：</div>
                    <div style="color: #999;">请输入所在地区</div>
                  </div>
                  <div class="flex" style="border-bottom: 1px #eaeaea solid; padding: 10px; font-size: 12px;">
                    <div style="width: 80px; text-align: left;">详细地址：</div>
                    <div style="color: #999;">请输入详细地址</div>
                  </div>
                  <div class="flex" style="border-bottom: 1px #eaeaea solid; padding: 10px; font-size: 12px;" v-if="all2.shenfenzheng">
                    <div style="width: 80px; text-align: left;">上传身份证：</div>
                    <div style="color: #999;">上传身份证</div>
                  </div>

                </div>

                <div><img :src="all.footer"></div>
              </div>
            </div> -->


              <!-- 新增 -->
              <div style="display:flex">
              <div style="margin: 20px 20px 20px 23px; display: flex; align-items: center;font-size:14px">评论板块:
              	<el-tooltip class="item" effect="dark" content="由商家自行导入评论内容，在下单滚动显示" placement="top-start">
              		<i class="el-icon-question" style="color: #409EFF; font-size: 25px; margin-left: 5px; cursor: pointer;" ></i>
              	</el-tooltip>
              </div>
              <div class="flexc">
                <div style="margin-right: 20px;"><el-radio v-model="all2.pinglun" label="0">不显示</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all2.pinglun" label="1">显示</el-radio></div>
                <div>
                  <el-select v-model="all2.pinglunid" placeholder="请选择评论模板">
                    <el-option v-for="item in pinglunlist" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </div>
				<div @click="goComment" style="margin-left: 20px; color: #335DFF; cursor: pointer;">管理评论模板</div>
              </div>
            </div>
             </div>
          </div>

          <div style="height: 100px;" class="flexcc">
            <el-button type="primary" round @click="fabu()" style="width:200px;height:50px;background:#3158F1">发布</el-button>
          </div>
        </div>

      </div>
    </div>

    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" :close-on-click-modal="false" :close-on-press-escape="false" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false" style="border-radius:12px">取消</el-button>
        <el-button type="primary" @click="tongbugo" style="border-radius:12px;background:#005AFF">确认</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择商品" :visible.sync="log_shop" width="700px">
      <div>
        <div class="flex" style="margin-left:20px">
          <el-input v-model="shopsearch.title" style="width: 180px; margin-right:20px;" placeholder="请输入商品名称"></el-input>
          <el-input v-model="shopsearch.fetch_code" style="width: 180px; margin-right:20px;" placeholder="请输入商品编码"></el-input>
          <el-button type="primary" @click="getshops()" round style="background:#005AFF">搜索</el-button>
        </div>
        <div style="height: 600px; overflow: auto;">

          <div class="flexbc" v-for="item in shoplists" :key="item.id" style=" padding:10px 20px; margin-top:10px;">
            <div class="flexc">
              <div style="margin-right: 20px;">
                <img :src="item.image1"  style="width: 100px; height:100px;border-radius:10px">
              </div>
              <div style="margin-right: 20px;">
                <div style="margin-bottom: 10px; font-weight: bold;">{{item.title}}
                  <!-- <el-button type="warning" style="margin-left: 20px;" size="mini" v-if="item.take_number == 1 && item.mobile_config == 1">归属地选号</el-button>
                  <el-button type="warning" style="margin-left: 20px;" size="mini" v-if="item.take_number == 1 && item.mobile_config == 2">支持选号</el-button> -->
                  <el-button type="warning" style="margin-left: 20px;" size="mini" v-if="item.take_number>0">支持选号</el-button>
                </div>
                <div style="margin-bottom: 10px;">编码：{{item.fetch_code}}</div>
                <div style="margin-bottom: 10px;">创建时间：{{item.created_at}}</div>
              </div>
            </div>

            <div>
              <el-button type="danger" @click="xuanzhong(item)" round style="background:#F72C6A">选择商品</el-button>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log_shop = false" style="border-radius:12px">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
	import {tongyidizhi} from '../common/tongyidiqu.js'
  import * as qiniu from 'qiniu-js'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  import {bufahuodiqu} from '../assets/bufahuodiqu.js'
  export default {
    components: {
      top,left,chuantu
    },
    name: "zhiboxiaoshou_shangpinfabu",
    data() {
      return {
          list:"",
          tongbuall:"",
          log:false,
          log_shop:false,
          input:"",
          all_pages_index:"",
          all:{
            pages:[],
            page_id:"",//	613552	是	string	敢探号商品id
            tab:this.$route.query.tab,//	1	是	string	商城id
            json:"",//		是	string	无
            sale_name:"",//	wq29元1	是	string	销售商品名
            on_sale:0,//		是	string	在售
            price:"",//	11	是	string	价格
            pic:"",//		是	string	图片
            details:"",//		是	string	详情
            order:"",//		是	string	无
            delivery_area:"",//		是	string	无
            delivery_city:"",//		是	string	无
            id:this.$route.query.id?this.$route.query.id:'',//	1	否	string	修改用
            page_name:"",
            yuezu:"",
            liuliang:"",
            taocan:"",
            yuyin:"",
            page_source:"",
            footer:"",
            limit:0,
            limit_type:0,
            description:"",
            network_access_protocol:0,
            protocol_id:[],
            protocol_check:false
          },
          xieyilist:"",
          all2:{
            guozhengtong:false,
            zuidaxiadan:false,
            duanxin:false,
            shouhuorenxingming:false,
            shenfenzheng:false,
            bufahuodiqu:'1',
            delivery_city:"",
            no_city:"",
            bufahuosheng:[],
            needidcard:"1",
            shenfenzhengtianxie:false,
            shouhuot1:"收货人",
            shouhuot2:"联系电话",
            shouhuot3:"所在地区",
            lianxidianhua:true,
            ruwangxieyi:"0",
            pinglun:"0",
            pinglunid:"",
            page_name_zi:'',
            page_id_zi:'',
            zimoren:'1',
            pic_zi:'',
            sureagain:'2',
            pic_sure:''
          },
          shoplists:"",
          shopsearch:{
            title:"",
            fetch_code:""
          },

          radio:'1',
          options:[],
          props: {
            multiple: true
          },
          relo:true,
          pinglunlist:"",
           limit_type1:0,
           limit_type2:1,
           fuwenbenshow:false,
          timer: "",
          iszi:1

      }
    },
    created() {
      this.getshangpinfenlei()
    },
    async mounted() {
      await this.getshops()
      if(this.$route.query.id){
        let p = new Promise((res,rej)=>{
          axios.get(`${this.apis}/api/page/info2?id=${this.$route.query.id}`)
          	.then(response => {
          		if (response.data.msg.code == 0) {
          			this.all = response.data.data
                this.limit_type1 = this.all.limit_type
                this.limit_type2 = this.all.limit_type
                if(this.all.protocol_check == 1){
                  this.all.protocol_check = true
                }else{
                  this.all.protocol_check = false
                }
                if(this.all.protocol_id != ''){
                  this.all.protocol_id = this.all.protocol_id.map(Number)
                   console.log(this.all.protocol_id)
                }

                if(this.all.pages && this.all.pages != ''){
                  this.all.pages.forEach(item=>{
                    this.shoplists.forEach(item2=>{
                      if(item.page_id == item2.id){
                        this.$set(item,'page_name2',item2.title)
                      }
                    })
                  })
                }


                this.relo = false
                this.$nextTick(()=>{
                  this.relo = true
                })
                this.fuwenbenshow = true

                let wenjianjia = 'web-page'
                if(process.env.NODE_ENV === 'development'){
                  // wenjianjia = 'test-web-page'
                }
                if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
                  wenjianjia = 'web-page'
                }
                if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
                  wenjianjia = 'test-web-page'
                }
				if(window.location.href.includes('localhost')){
				  wenjianjia = 'test-web-page'
				}

                axios.get(`https://file.91haoka.cn/${wenjianjia}/${this.$route.query.id}.json?v=${Math.random()}`)
                // axios.get(`${this.apis}/storage/web-page/${this.$route.query.id}.json?v=${Math.random()}`)
                  .then(response => {
                      this.all2 = JSON.parse(response.data)
                      console.log(this.all2)
                      if(this.all2.needidcard==undefined){
                        this.$set(this.all2, 'needidcard', '1')
                      }
                      if(this.all2.zimoren){
                        this.all2.zimoren = this.all2.zimoren
                      }else{
                        this.$set(this.all2, "zimoren", "1");
                      }
                      if(this.all2.sureagain){
                        this.all2.sureagain = this.all2.sureagain
                      }else{
                        this.$set(this.all2, "sureagain", "2");
                      }
                      this.relo = false
                      this.$nextTick(()=>{
                        this.relo = true
                      })
                      res('ok')
                  })

          		} else {
          			this.$message.error(response.data.msg.info);
          		}
          	})
        })
        p.then(res=>{
          if(this.all2.pinglunid){
            let arr = []
            for(let i in this.pinglunlist){
              arr.push(this.pinglunlist[i].id)
            }
            if(!arr.includes(this.all2.pinglunid)){
              this.all2.pinglunid = ''
            }
          }
        })


      }else{
        this.fuwenbenshow = true
      }

      this.options = bufahuodiqu
      // this.options = tongyidizhi

    },
          beforeDestroy() {
    console.log('beforeDestroy')
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
    methods: {
      goAgreement(){
        window.open("/web/zhiboxitong/ruwangxieyi")
      },
      goComment(){
       window.open("/web/zhiboxitong/pinglunguanli")
      },
      fuwenbenfanhui:function(html){
        this.all.description = html
      },
      getshangpinfenlei:function(){
        this.timer = setInterval(() => {
                   axios.get(`${this.apis}/api/comment/template/list`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.pinglunlist = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });

        axios.get(`${this.apis}/api/network-process-protocol/list`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.xieyilist = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
        },1000)

      },
      upup:function(file){
        var params = new FormData();
        params.append('file',file.file);
        params.append('noDelivery',1);
        axios.post(`${this.apis}/api/delivery/data`, params)
          .then(response=> {
              if (response.data.msg.code == 0) {
                this.all2.bufahuodiqu = '3'
                this.all2.no_city = response.data.data
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })
      },
      down:function(){
              const a = document.createElement('a');
            	a.setAttribute('download', '不发货省市区.xlsx');
            	a.setAttribute('href', '/web/static/bufahuoshengshiqu.xlsx');
            	a.click();
      },
      shanchuduo:function(indexs){
        this.all.pages = this.all.pages.filter((item,index)=> index != indexs)

      },
      bianjit:function(v){
        let name = ''
        if(v == 'shouhuot1'){
          name = '收货人'
        }
        if(v == 'shouhuot2'){
          name = '联系电话'
        }
        if(v == 'shouhuot3'){
          name = '所在地区'
        }

        this.$prompt(name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.all2[v] = value
          this.$message({
            type: 'success',
            message: '已修改'
          });
        })
      },
      guozhengtongxuanze:function(){
        if(this.all2.guozhengtong){
          this.all2.shenfenzhengtianxie = true
        }
      },
      shenfenzhengtianxiexuanze:function(){
        if(this.all2.shenfenzhengtianxie){

        }else{
          this.all2.guozhengtong = false
          this.all2.shouhuorenxingming = false
        }
      },
      all_pages_add:function(){
        this.all.pages.push({
          page_id:"",
          page_name2:"",
          page_name:"",
          unit_price:""
        })
      },
      log_shopxuanze:function(index,type){
        if(type){
          this.iszi = type
        } else{
          this.iszi = 1
        }

        this.all_pages_index = index
        this.log_shop = true
      },
      test:function(){
        this.all2.bufahuosheng = []
        let checkedNodeList = this.$refs.test.getCheckedNodes();
        console.log(checkedNodeList)
        checkedNodeList = checkedNodeList.filter(item => (item.parent == null && item.checked)); // 核心
        checkedNodeList.forEach(item=>{
          this.all2.bufahuosheng.push(item.value)
        })
      },

      xuanzhong:function(item){
        if(this.iszi==1){
          let x = this.all.pages.filter(itemx => item.id == itemx.page_id)
          console.log(x)
          if(x != ''){
            this.$message.error('不能添加重复商品');
            return false
          }
          this.all.pages[this.all_pages_index].page_id = item.id
          this.all.pages[this.all_pages_index].page_name2 = item.title
          console.log(this.all.pages)
          // this.all.page_id = item.id
          // this.all.page_name = item.title
          this.log_shop = false
        }else{
          //是子商品
          this.all2.page_id_zi = item.id
          this.all2.page_name_zi = item.title
          this.log_shop = false
        }

      },
      fabu:function(){
        if(this.all.pages == '' || !this.all.pages[0].page_id){
          this.$message.error('请选择要提交的商品');
          return false
        }
        if(!this.all.sale_name){
          this.$message.error('请输入页面名称');
          return false
        }

        this.all.pages = this.all.pages.filter(item => item.page_id)

        this.all.pages.forEach(item=>{
          if(item.unit_price == ''){
            item.unit_price = 0
          }
        })

          this.all.page_name = this.all.pages[0].page_name2

        if(this.all2.needidcard=='2'){
          this.all.limit_type = this.limit_type2
        }else{
          this.all.limit_type = this.limit_type1
        }
        if(this.all2.needidcard=='1'){
          this.all.limit_type = this.limit_type1
        }

        this.all.guozhengtong  =  this.all2.guozhengtong

         axios.post(`${this.apis}/api/page/make2`,this.all)
              .then(response => {
                if (response.data.msg.code == 0) {

                  let id = this.$route.query.id ? this.$route.query.id : response.data.data.id
                  var Obj2str = function(o) {
                      if (o == undefined) {
                          return "";
                      }
                      var r = [];
                      if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
                      if (typeof o == "object") {
                          if (!o.sort) {
                              for (var i in o)
                                  r.push("\"" + i + "\":" + Obj2str(o[i]));
                              if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                                  r.push("toString:" + o.toString.toString());
                              }
                              r = "{" + r.join() + "}"
                          } else {
                              for (var i = 0; i < o.length; i++)
                                  r.push(Obj2str(o[i]));
                              r = "[" + r.join() + "]";
                          }
                          return r;
                      }
                      return o.toString().replace(/\"\:/g, '":""');
                  }


                  let wenjianjia = 'web-page'
                  if(process.env.NODE_ENV === 'development'){
                    // wenjianjia = 'test-web-page'
                  }
                  if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
                    wenjianjia = 'web-page'
                  }
                  if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
                    wenjianjia = 'test-web-page'
                  }
                  if(window.location.href.includes('localhost')){
                    wenjianjia = 'test-web-page'
                  }

                  axios.post(`${this.apis}/api/qiniu/token`,{bucket:'gthshopstore',cloud:`${wenjianjia}/${id}.json`})
                    .then(response => {
                      var that = this
                      if(response.data.msg.code == 0){
                        const observer = {
                          next(res){

                          },
                          error(err){

                          },
                          complete(res){

                            that.$message.success('发布成功');
                            // that.goid('/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_shangpin',this.$route.query.tab)
                            that.$router.push({
                              path:'/zhiboxitong/meitituiguang/meitituiguang_fabu2',
                              query:{
                                id:id,
                                duo:1
                              }
                            })
                          }
                        }

                        let files = Obj2str(JSON.stringify(this.all2))
                        let file = new File([files], `${wenjianjia}/${id}.json`, {type: 'application/json'});
                        const observable = qiniu.upload(file, file.name, response.data.data, {}, {})
                        const subscription = observable.subscribe(observer) // 上传开始
                      }else{
                        this.$message.error(response.data.msg.info);
                      }
                    });

                    // let id = this.$route.query.id ? this.$route.query.id : response.data.data.id
                    //  let data = {
                    //    id:id,//	是	string	销售页的id
                    //    type:"json",//	是	string	css json 等 文件的后缀本示例为 5.css
                    //    data:JSON.stringify(this.all2),//	是	array	要存的数据 到时候访问id.type(5.css)返回的就是data里的数据
                    //    path:"page",//	否	string	store 店铺用的 page 商品用的
                    //  }
                    //  axios.post(`${this.apis}/api/page/json`,data)
                    //       		.then(response => {
                    //       			if (response.data.msg.code == 0) {
                    //               // this.$message.success('发布成功');
                    //               // this.goid('/zhiboxitong/meitituiguang')
                    //               this.$router.push({
                    //                 path:'/zhiboxitong/meitituiguang/meitituiguang_fabu2',
                    //                 query:{
                    //                   id:id,
                    //                   duo:1
                    //                 }
                    //               })
                    //       			} else {
                    //       				this.$message.error(response.data.msg.info);
                    //       			}
                    //       	})

                } else {
                    this.$message.error(response.data.msg.info);
                }
            })

      },
      getimg:function(img){
        this.all.pic = img
      },
      getimg2:function(img){
        this.all.details = img
      },
      getimg3:function(img){
        this.all.footer = img
      },
      getimg6:function(img){
        this.all2.pic_zi = img
      },
      getimg8:function(img){
        this.all2.pic_sure = img
      },
      xiayibu:function(){
        this.goid('/zhiboxitong/zhiboxiaoshou_fabu2')
      },
      //获取商品
      getshops:async function() {
      	await axios.get(`${this.apis}/api/order-page/list`,{
          params:this.shopsearch
        })
      		.then(response => {
      			if (response.data.msg.code == 0) {
      				this.shoplists = response.data.data

      			} else {
      				this.$message.error(response.data.msg.info);
      			}
      		})
      },
      //当前是否需要身份证
      isneedcard(e){
        //选择了不需要身份证
        if(e==2){
          //国政通取消
          this.all2.guozhengtong=false
          //收货人使用身份证姓名取消
          this.all2.shouhuorenxingming=false
          //使用身份证填写
          this.all2.shenfenzhengtianxie = false
          this.all2.min_page = ""
          this.all2.max_page = ""
        }
      }

    }
  }
</script>

<style scoped lang="less">

.two_module{
  padding: 30px;
  position: relative;
  border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
  background: #F8F9FD;
  margin-top: 20px;
}
.one_module{
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
  background: #F8F9FD;
  margin-top: 20px;
  padding-left:30px ;
}
       /deep/ .el-input__inner {
      // border: none;
      // background:rgba(0, 0, 0,0.1);
      height: 40px;
      border-radius: 8px;
      width: 180px;
 }
  .zhiboxiaoshou_shangpinfabu {
    color: #333;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100%;

      }
      .right{ width: calc(100vw - 217px);
      height: 100vh; overflow: auto;
      .taocan{ padding: 10px; border-radius:5px; border:1px #eaeaea solid; text-align:center; margin-bottom:5px;}
        .zhiboxitong_right{
            border-top-left-radius: 5px;
           box-sizing: border-box;

        }
        .xiaright{
           position: absolute;
           right: 300px;
           top: 180px;
          width: 300px; height: 700px; background: url('https://static.91haoka.cn/gantanhao/shouji3.png'); background-size: 300px 700px; padding: 50px 20px;
          img{ width: 100%;}
        }
        .fleft{
          padding-top: 50px;
          .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
          .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
          .r{}
        }
        .buzhou{ padding: 50px;}
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
  /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

  }
/deep/ .el-radio__input.is-checked .el-radio__inner {
background: #3158F1;
border:1px solid #3158F1;

 }
/deep/ .el-radio__input.is-checked+.el-radio__label{
color: black;
}
</style>
